@use '@scss/common' as *;

.invites {
  margin-bottom: 1rem;

  & > *:not(:last-child) {
    margin-bottom: 1rem;
  }
}

.item {
  display: flex;
  position: relative;
  left: -0.5rem;
  width: calc(100% + 1rem);

  & > * {
    flex: 1;
    margin: 0 0.5rem;
  }
}

.field {
  width: 100%;
  align-self: flex-end;
  flex: 1 1;
}

@include small-break {
  .fieldWrap {
    padding: 1rem 0;
    position: relative;

    &:before {
      position: absolute;
      content: '';
      width: 1px;
      height: calc(100% - 2rem);
      top: 1rem;
      left: -1rem;
      background-color: var(--theme-border-color);
    }

    & div {
      flex-direction: column;
    }

    & label {
      align-self: flex-start;
    }

    & button {
      align-self: center;
      transform: translateY(100%);
    }
  }
}
